'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { BarChart, Users, CreditCard, Settings, ChevronDown, ChevronRight } from 'lucide-react'

const menuItems = [
  {
    icon: BarChart,
    name: '数据概览',
    href: '/',
    subItems: [
      { name: '用户分析', href: '/' },
      { name: '妆造分析', href: '/makeup-analysis' },
      { name: '视频分析', href: '/video-analysis' },
    ]
  },
  { icon: CreditCard, name: '计费管理', href: '/billing' },
  { icon: Settings, name: '系统设置', href: '/settings' },
]

export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(true)
  const [expandedItem, setExpandedItem] = useState('数据概览')
  const pathname = usePathname()

  return (
    <aside
      className={`bg-gray-800 text-white h-screen flex flex-col transition-all duration-300 ease-in-out ${
        isOpen ? 'w-64' : 'w-20'
      }`}
    >
      <div className="flex items-center justify-between p-4 border-b border-gray-700">
        <h2 className={`font-bold ${isOpen ? 'text-xl' : 'text-xs'}`}>
          {isOpen ? '管理系统' : 'MS'}
        </h2>
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="text-white hover:bg-gray-700 p-1 rounded"
        >
          {isOpen ? '<<' : '>>'}
        </button>
      </div>
      <nav className="flex-1 overflow-y-auto">
        <ul className="py-2">
          {menuItems.map((item) => (
            <li key={item.name}>
              {item.subItems ? (
                <div>
                  <button
                    onClick={() => setExpandedItem(expandedItem === item.name ? '' : item.name)}
                    className={`w-full flex items-center justify-between py-3 px-4 hover:bg-gray-700 transition-colors ${
                      pathname === item.href ? 'bg-gray-700' : ''
                    }`}
                  >
                    <div className="flex items-center">
                      <item.icon className="h-5 w-5 min-w-[1.25rem]" />
                      {isOpen && <span className="ml-3">{item.name}</span>}
                    </div>
                    {isOpen && (
                      expandedItem === item.name ? 
                        <ChevronDown className="h-4 w-4" /> : 
                        <ChevronRight className="h-4 w-4" />
                    )}
                  </button>
                  {isOpen && expandedItem === item.name && (
                    <ul className="bg-gray-900">
                      {item.subItems.map((subItem) => (
                        <li key={subItem.name}>
                          <Link href={subItem.href}>
                            <span
                              className={`flex items-center py-2 px-4 pl-12 hover:bg-gray-700 transition-colors ${
                                pathname === subItem.href ? 'bg-gray-700' : ''
                              }`}
                            >
                              {subItem.name}
                            </span>
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              ) : (
                <Link href={item.href}>
                  <span
                    className={`flex items-center py-3 px-4 hover:bg-gray-700 transition-colors ${
                      pathname === item.href ? 'bg-gray-700' : ''
                    }`}
                  >
                    <item.icon className="h-5 w-5 min-w-[1.25rem]" />
                    {isOpen && <span className="ml-3">{item.name}</span>}
                  </span>
                </Link>
              )}
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  )
} 